<template>
  <div class="user">
    <!--搜索和添加-->
    <el-row :gutter="20" class="adduser">
      <el-col :span="7">
        <el-input
          :placeholder="$t(`table.placeholder`)"
          @clear="handleclear"
          clearable
          v-model.trim="params.query"
        ></el-input>
      </el-col>
      <el-col :span="8">
        <el-button type="primary" @click="searchuser" :icon="Search">{{ $t(`table.search`) }}</el-button>
        <el-button type="success" @click="adduser">{{ $t(`table.adduser`) }}</el-button>
      </el-col>
    </el-row>
    <!--数据列表-->
    <el-table :data="tableData" style="width: 100%" border stripe>
      <el-table-column
        :prop="item.prop"
        :label="$t(`table.${item.label}`)"
        v-for="item in options"
        :key="item.label"
        :width="item.width"
      >
        <template #default="{ row }" v-if="item.label === 'action'">
          <el-button type="primary" :icon="Edit" circle @click="edituser(row)" />
          <el-button type="danger" :icon="Delete" circle @click="deleteuseritem(row.id)" />
        </template>
        <template #default="{ row }" v-else-if="item.label === 'mg_state'">
          <el-switch v-model="row.mg_state" @change="changestate(row.id, row.mg_state)" />
        </template>
        <template #default="{ row }" v-else-if="item.label === 'create_time'">
          {{ $filters.filtertime(row.create_time * 1000, 'YYYY/MM/DD hh:mm:ss') }}
        </template>
      </el-table-column>
    </el-table>
    <!--分页器-->
    <el-pagination
      v-model:currentPage="params.pagenum"
      v-model:page-size="params.pagesize"
      :page-sizes="[1, 2, 3, 4]"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <!--dialog-->
    <Dialog
      :centerDialogVisible="centerDialogVisible"
      @updatauserlist="updatauserlist"
      @closedialog="closedialog"
      :isadduser="isadduser"
      :editinfo="editinfo"
    ></Dialog>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'

import { ElMessage } from 'element-plus'
import type { FormInstance } from 'element-plus'
import { Search, Edit, Delete } from '@element-plus/icons-vue'

import { useI18n } from 'vue-i18n'
import Dialog from './components/Dialog.vue'

import { userList, changeuserstate, deleteuser } from '@/server/user'
import { options } from './options'
export default defineComponent({
  components: {
    Dialog
  },
  setup() {
    const i18n = useI18n()
    const centerDialogVisible = ref(false)
    const tableData = ref([])
    const isfrist = ref(true)
    const isadduser = ref(false)
    const editinfo = ref({})
    const total = ref(0)
    const adduserRef = ref<FormInstance>()
    const params = ref({
      query: '',
      pagenum: 1,
      pagesize: 4
    })
    // 请求用户列表数据
    function getuserlist() {
      userList(params.value).then((res: any) => {
        tableData.value = res.data.users
        total.value = res.data.total
        console.log(res.data)
      })
    }
    getuserlist()
    // 编辑用户
    const edituser = (row: any) => {
      isadduser.value = false
      centerDialogVisible.value = true
      editinfo.value = row
    }
    // 删除用户
    const deleteuseritem = async (id: number) => {
      const res = await deleteuser(id)
      if ((res as any).meta.status === 200) {
        ElMessage.success(i18n.t('message.deleteSuccess'))
        getuserlist()
      } else {
        ElMessage.warning(i18n.t('message.deleteError'))
      }
    }
    // 搜索用户
    const searchuser = () => {
      if (params.value.query.length !== 0 || !isfrist.value) {
        getuserlist()
        isfrist.value = false
      } else {
        ElMessage.error(i18n.t('search.errorinfo'))
      }
    }
    const handleclear = () => {
      getuserlist()
    }
    // 分页器对应的处理函数
    const handleSizeChange = () => {
      getuserlist()
    }
    const handleCurrentChange = () => {
      getuserlist()
    }
    // 修改用户状态
    const changestate = (id: number, state: boolean) => {
      changeuserstate({ uId: id, type: state }).then((res: any) => {
        if (res.meta.status === 200) {
          ElMessage.success(i18n.t('message.updeteSuccess'))
          getuserlist()
        } else {
          ElMessage.error(i18n.t('message.updateError'))
        }
      })
    }
    // 添加用户dialog显示
    const adduser = () => {
      centerDialogVisible.value = true
      isadduser.value = true
    }
    // 关闭dialog对话框
    const closedialog = () => {
      centerDialogVisible.value = false
    }
    // 添加用户成功后更新数据
    const updatauserlist = () => {
      getuserlist()
    }
    return {
      Search,
      Edit,
      Delete,
      isadduser,
      params,
      tableData,
      editinfo,
      centerDialogVisible,
      total,
      options,
      adduserRef,
      changestate,
      adduser,
      edituser,
      deleteuseritem,
      searchuser,
      handleclear,
      handleSizeChange,
      handleCurrentChange,
      closedialog,
      updatauserlist
    }
  }
})
</script>

<style lang="scss" scoped>
.adduser {
  margin-bottom: 10px;
}
.el-pagination {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}
</style>
